{% extends "app/base_site.html" %}

{% block title %} 报警详情 {% endblock title %}

{% block stylesheets %}
  {{ block.super }}
    <link rel="stylesheet" href="/static/lib/jquery/fancybox/3.5.7/jquery.fancybox.min.css" />
    <!-- bootstrap-wysiwyg -->
    <link href="/static/vendors/google-code-prettify/bin/prettify.min.css" rel="stylesheet">
    <style>

    </style>
{% endblock stylesheets %}

{% block content %}
  <div class="right_col" role="main">

    <div class="">

      <div class="row">
        <div class="col-md-12">
          <div class="x_panel">
            <div class="x_title">
              <h2>报警详情
                  <span id="top_loading" ><img class="top_loading_img" src="/static/images/load.gif" alt="loading">加载中</span>
                  <span id="top_msg"></span>
              </h2>
              <div class="clearfix"></div>
            </div>
            <div class="x_content">
              <div class="row">

                <div class="col-sm-9 mail_view">
                  <div class="inbox-body">

     <!--展示视频start -->
                <div>
                  <p>
                    <span><i class="fa fa-paperclip"></i> 报警视频数量（{{ alarm.video_count }}） </span>
                  </p>
    {% if alarm.video_count > 0 %}
              <div style="margin: 10px 0;">
                   <video controls muted loop preload="none"  style="width: 100%; display: block;"
                          poster="{{ alarm.imageUrl }}" src="{{ alarm.videoUrl }}" >
                   </video>
             </div>

    {% endif %}
                </div>
   <!--展示视频end -->

                  <!--展示图片start -->
                    <div class="attachment">
                      <p>
                        <span><i class="fa fa-paperclip"></i> 报警图片数量（{{ alarm.image_count }}）  </span>
                      </p>
                      <ul>

                        {%  for imageUrl  in alarm.imageUrlArray %}
                            <li>
                              <a href="#" class="atch-thumb">
                                <img style="width: 150px;height: 100%;" src="{{imageUrl}}" alt="img" />
                              </a>

                        <div class="links">
                            <a style="margin-left: 10px;margin-right: 5px;font-size: 13px;color:#23527c;" href="javascript:;">第{{forloop.counter}}张</a>
                            <i class="fa fa-download"></i><a style="color:#23527c;" href="{{imageUrl}}" target="_blank">下载</a>
                          </div>


                            </li>
                        {% endfor %}

                      </ul>
                    </div>
                  </div>
                 <!--展示图片end -->

                </div>

                <div class="col-sm-3 mail_list_column">

                <div class="mail_list">
                          <div class="left">
                            <i class="fa"></i>
                          </div>
                          <div class="right">

                          </div>
                        </div>
                  <div class="mail_list">
                          <div class="left">
                            <i class="fa"></i>
                          </div>
                          <div class="right">
                            <h3>报警ID <small>{{ alarm.id }}</small></h3>
                          </div>
                        </div>
                        <div class="mail_list">
                          <div class="left">
                            <i class="fa"></i>
                          </div>
                          <div class="right">
                            <h3>报警编号 <small>{{ alarm.code }}</small></h3>
                          </div>
                        </div>
                        <div class="mail_list">
                          <div class="left">
                            <i class="fa"></i>
                          </div>
                          <div class="right">
                            <h3>画框类型 <small>
                                {% if alarm.draw_type == 1 %}
                                    画框
                                {% else %}
                                    不画框
                                {% endif %}
                                </small></h3>
                          </div>
                        </div>

                       <div class="mail_list">
                          <div class="left">
                            <i class="fa"></i>
                          </div>
                          <div class="right">
                            <h3>报警时间 <small>{{ alarm.create_time }}</small></h3>
                          </div>
                        </div>
                    <!--
                    <div class="mail_list">
                          <div class="left">
                            <i class="fa"></i>
                          </div>
                          <div class="right">
                            <h3>关联视频 <small><a href="javascript:f_stream_edit('{{ alarm.stream_code }}')">前往</a></small></h3>
                          </div>
                        </div>

                        <div class="mail_list">
                          <div class="left">
                            <i class="fa"></i>
                          </div>
                          <div class="right">
                            <h3>关联布控 <small><a href="javascript:f_control_edit('{{ alarm.control_code }}')">前往</a></small></h3>

                          </div>
                        </div>

                        <div class="mail_list">
                          <div class="left">
                            <i class="fa"></i>
                          </div>
                          <div class="right">
                              <h3>关联算法 <small><a href="javascript:f_flow_edit('{{ alarm.flow_code }}')">{{ alarm.flow_name }}</a></small></h3>

                          </div>
                        </div>
                    -->

                          <div class="mail_list">
                                  <div class="left">
                                    <i class="fa"></i>
                                  </div>

                                  <div class="right">

                                               <div class="radio">
                                          <label>
                                            <input type="radio" {% if alarm.state == 0 %} checked="checked" {% endif %} value="0" name="state"> 未处理
                                          </label>
                                        </div>

                                      <div class="radio">
                                          <label>
                                            <input type="radio" {% if alarm.state == 1 %} checked="checked" {% endif %} value="1" name="state"> 审核确认为正常报警
                                          </label>
                                        </div>

                                       <div class="radio">
                                          <label>
                                            <input type="radio" {% if alarm.state == 2 %} checked="checked" {% endif %} value="2" name="state"> 审核确认为误报
                                          </label>
                                        </div>

                                        <div>
                                            <input type="text" name="review_remark"  value="{{ alarm.review_remark }}" placeholder="请输入审核备注" class="form-control">

                                            <button style="margin-top: 10px;" onclick="f_review()" type="submit" class="btn btn-dark">提交</button>
                                         </div>

                                  </div>
                           </div>

                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
{% endblock content %}

{% block javascripts %}
  {{ block.super }}
<script src="/static/lib/jquery/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<script>
    let alarm_code = "{{ alarm.code }}";
    function f_stream_edit(code) {
        let url = "/stream/edit?code="+code;
        window.location.href = url;
    }
    function f_control_edit(code) {
        let url = "/control/edit?code="+code;
        window.location.href = url;
    }
    function f_flow_edit(code) {
        let url = "/algorithmFlow/edit?code="+code;
        window.location.href = url;
    }
    function f_review() {
        let eleState = $("input[type=radio][name='state']:checked");
        let eleReviewRemark = $("input[name='review_remark']");
        let state = parseInt(eleState.val());
        let review_remark = eleReviewRemark.val();

        $.ajax({
           url: "/alarm/edit",
           type: "post",
           async: true,
           data: {
               "code":alarm_code,
               "state":state,
               "review_remark":review_remark
           },
           dataType: "json",
           timeout: 0,
           error: function () {
                myAlert("网络异常，请确定网络正常！","error");
           },
           success: function (res) {
               if(1000 === res.code){
                   myAlert(res.msg,"success",2000);
               }else{
                    myAlert(res.msg,"error");
               }
           }
        });

    }
    $(function() {
        $('img').click(function () {
            $.fancybox.open({
                src: $(this).attr('src'),
                type: 'image'
            });
        });
    });
</script>
{% endblock javascripts %}
